<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>成长时间轴</title>
<script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Public/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/Public/js/lazyload.js"></script>
<script type="text/javascript" src="Public/artDialog/artDialog.source.js?skin=default" charset="utf-8"></script>
<script type="text/javascript" src="/Public/js/jquery.ae.image.resize.min.js"></script>
<script type="text/javascript" src="/Public/js/jquery.date.js"></script>
<script type="text/javascript" src="/Public/js/jquery-anchorGoWhere.js"></script>

<link rel="stylesheet" href="/Public/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/theme/default/css/common.css">
<link rel="stylesheet" href="Public/css/homeindex.css">

  <!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="/Public/bootstrap/css/bootstrap-ie6.css">
  <![endif]-->
  <!--[if lte IE 7]>
  <link rel="stylesheet" type="text/css" href="/Public/bootstrap/css/ie.css">
  <![endif]-->

<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}html{color:#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical}body,button,input,select,textarea{font-family:arial,\5b8b\4f53,sans-serif}h1,h2,h3,h4,h5,h6{font-size:100%}em{font-style:normal}small{font-size:12px}ul,ol{list-style:none}

	#back-to-top{
		position:fixed;
		bottom:100px;
		right:60px;
	}
	#back-to-top a{
		text-align:center;
		text-decoration:none;
		color:#d1d1d1;
		display:block;
		width:80px;
		/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
		-moz-transition:color 1s; 
		-webkit-transition:color 1s;
		-o-transition:color 1s;
	}
	#back-to-top a:hover{
		color:#979797;
	}
	#back-to-top a span{
		background:#d1d1d1;
		border-radius:6px;
		display:block;
		height:80px;
		width:80px;
		background:#d1d1d1 url(Public/images/arrow-up.png) no-repeat center center;
		margin-bottom:5px;
		-moz-transition:background 1s;
		-webkit-transition:background 1s;
		-o-transition:background 1s;
	}
	#back-to-top a:hover span{
		background:#979797 url(Public/images/arrow-up.png) no-repeat center center;
	}


.mod-timeline-hld{
	width:958px;
	padding-bottom:35px;	
}
.clearfix{
	zoom:1
}
.clearfix:after {
content: '\20';
display: block;
height: 0;
clear: both;
}
.mod-timeline-hld .headline-ctn {
position: relative;
float: left;
}
.mod-timeline-hld .headline {
background: #6699c9;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
width: 145px;
box-shadow: 2px 2px 2px #e3e3e3;
-moz-box-shadow: 2px 2px 2px #e3e3e3;
-webkit-box-shadow: 2px 2px 2px #e3e3e3;
}
.mod-timeline-hld .headline-ctn .headline-arr {
height: 0;
border-width: 8px 8px 0;
border-color: #6699c9 transparent;
_border-color: #6699c9 #fff;
border-style: solid;
position: absolute;
bottom: -8px;
right: 30px;
_right: 29px;
_font-size: 0;
_line-height: 0;
}

#aside {
float: right;
width: 55px;
_position: relative;
margin-top: 40px;
}

.mod-timelinenav {
-moz-transition: top .5s;
-o-transition: top .5s;
-webkit-transition: top .5s;
transition: top .5s;
}
.mod-timelinenav .norecord {
display: none;
}
.mod-timelinenav .yearlink {
border-left: 5px solid #6699c9;
line-height: 20px;
display: inline-block;
padding-left: 5px;
color: #9d9d9d;
}
.timelinenav-mpanel {
margin: 1px 0;
}
.mod-timelinenav .active {
}

.mod-timelinenav .yearlink {
border-left: 5px solid #6699c9;
line-height: 20px;
display: inline-block;
padding-left: 5px;
color: #9d9d9d;
}
.mod-timelinenav a, .mod-timelinenav a:visited, .mod-timelinenav a:hover, .mod-timelinenav a:active {
text-decoration: none;
}
.mod-timelinenav .active .yearlink {
font-weight: bold;
color: #666;
}
.mod-timelinenav .active .timelinenav-mpanel {
display: block;
}
.timelinenav-mpanel li {
}
.mod-timelinenav .highlight .monthlink {
color: #0360af;
font-weight: bold;
}
.mod-timelinenav .monthlink {
border-left: 5px solid #b2d1ed;
line-height: 15px;
display: inline-block;
padding-left: 5px;
color: #999;
display: block;
}

#timelineholder{
float:left;	
}

.mod-timeline {
background: transparent url(Public/images/timeline_c_axis_14cf53c9.png) repeat-y 105px 0;
height: auto;
width: 860px;
}
.separate {
height: 30px;
}
.mod-timeline .timeline-year-ind {
margin-left: -18px;
top: 0;
width: 845px;
z-index: 1000;
}
.timeline-year-ind .year-label {
float: left;
width: 70px;
height: 26px;
background: #c4cdd6;
line-height: 26px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.timeline-year-ind .ind-arr {
float: left;
width: 0;
height: 2px;
border-style: solid;
border-width: 12px 0 12px 12px;
border-color: transparent #c4cdd6;
_font-size: 0;
_border-color: #fff #c4cdd6;
}
.timeline-main-panel {
padding-top: 15px;
}
.mod-timeline .timeline-cat {
background: transparent url(Public/images/timeline_c_axis_14cf53c9.png) repeat-y 105px 0;
}
.mod-timeline .timeline-main {
background: transparent url(Public/images/timeline_c_axis_14cf53c9.png) repeat-y 105px 0;
padding-bottom: 5px;
overflow: hidden;
}
.timeline-rec {
opacity: 1;
transition: opacity 1.5s;
-moz-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
margin-bottom: 20px;
}
.timeline-rec .timeline-rec-timestamp {
margin-left: 51px;
margin-top: 10px;
width: 40px;
color: #999;
text-align: right;
}

.timeline-rec .timeline-rec-cnt, .timeline-rec .timeline-rec-timestamp {
float: left;
_display: inline;
}
.timeline-rec-cnt {
margin-left: 50px;
position: relative;
}

.s-article {
color: #999;
line-height: 18px;
}
.timeline-rec .lightgray {
background: #fcfcfc;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #ddd;
}
.timeline-rec .w572 {
width: 652px;
padding: 10px 20px 18px;
overflow:hidden
}

.rec-arr{
_font-size:0;
left:-42px;	
}
.lightgray .rec-arr {
background: transparent url(Public/images/tl_gray_arr_3a54c11c.png) no-repeat 0 0;
}
.rec-arr {
width: 43px;
height: 32px;
top: 8px;
position: absolute;
}
.timeline-rec .title-bot .rec-title {
border-bottom: 1px solid #efefef;
margin-bottom: 15px;
}
.timeline-rec-cnt .rec-title {
color: #555;
font-size: 14px;
line-height: 32px;
}

.rec-title
.timeline-rec-cnt .rec-title {
color: #555;
font-size: 14px;
line-height: 32px;
}
.rec-time, .rec-title-txt {
font-weight: bold;
}
.rec-title-from {
color: #999;
right: 20px;
position: absolute;
font-size: 12px;
}

.tlr-enter .rec-title, .timeline-rec-cnt:hover .rec-title {
}

.tlr-enter-right .lightgray .rec-arr,.lightgray:hover .rec-arr{background:transparent url(Public/images/tl_gray_arr_hover_e25bb00a.png) no-repeat 0 0}


.userRelationUser {
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2px;
margin: 0 20px 10px 0;
float: left;
overflow: hidden;
text-align: center;
display:inline;
width:136px;
}
.userRelationUser .profilePic {
width: 102px;
height: 100px;
background: #fff;
border: solid 1px #fff;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.userRelationUser div {
margin-left: auto;
margin-right: auto;
font-size:12px;
}
.userRelationUser .profilePic a {
border: none;
display: block;
}
.userRelationUser .profilePic img {
width: 90px;
height: 90px;
display: block;
-webkit-border-radius: 47px;
-moz-border-radius: 47px;
border-radius: 47px;
border: solid 4px #fff;
}
a * {
cursor: pointer;
}
.userRelationUser:hover .profilePic img {
border: solid 4px #eee;
}
.userRelationUser .profilePic a:hover img {
}
.userRelationUser .profileLink a {
width: 102px;
height: 40px;
display: block;
word-break: break-all;
padding: 5px 0 0 0;
font-weight: bold;
font-size: 13px;
color: #6598b3;
text-decoration: none;
cursor: pointer;
}
.fixed {
position: fixed;
_position: absolute;
top: 20px;
}
</style>
  
</head>

<body>
<p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p>

<include file="./template/default/Public/header-logined.html" />


<div class="container">
<div class="mod-timeline-hld clearfix" id="timelinecontainer" style="display:block">
	
    <div class="headline-ctn">
    	<h2 class="headline">成长时间轴</h2>
    	<span class="headline-arr"></span>
    </div>
    
    <div id="aside">
    
    	<div class="mod-timelinenav">
        	<ul class="timelinenav-panel" id="timelinenavpanel">
            	<!--<li data-year="2014" class="norecord">
                	<a href="#" class="yearlink" hidefocus>2014年</a>
                    <ul class="timelinenav-mpanel">
                    	
                    </ul>
                </li>
                <li data-year="2013" class="active">
                	<a href="#" class="yearlink" hidefocus>2013年</a>
                    <ul class="timelinenav-mpanel">
                    	<li data-month="3" data-year="2013" class="highlight">
                        	<a href="#" class="monthline" hidefocus>3月</a>
                        </li>
                    </ul>
                </li>-->
                
                
                
                
                
            </ul>
        </div><!--end mod-timelinenav-->
        
    </div>
    
    <div id="timelineholder">
    	<div class="timeline-main-panel" id="timelinemain">
        
        </div><!--end timelinemain-->
        <div id="timline_more_btn">
        <a onclick="getTimelineMore()" href="javascript:void(0)" class="btn btn-block">加载更多&raquo;</a>
        </div>
    
    </div><!--end timelineholder-->


</div>

</div><!--end container-->
<script type="text/javascript">
var nav_json = {$nav_json};
var nav_array = {$nav_array};
var parm_req_array = new Array();

function createNav(){
/*
timelinenavpanel
<li data-year="2014" class="norecord">
                	<a href="#" class="yearlink" hidefocus>2014年</a>
                    <ul class="timelinenav-mpanel">
                    	
                    </ul>
                </li>
                <li data-year="2013" class="active">
                	<a href="#" class="yearlink" hidefocus>2013年</a>
                    <ul class="timelinenav-mpanel">
                    	<li data-month="3" data-year="2013" class="highlight">
                        	<a href="#" class="monthline" hidefocus>3月</a>
                        </li>
                    </ul>
</li>
*/	
var navHtml='';
var navYear='';

$.each(nav_array,function(dataIndex,data){
	navYear+='<li data-year="'+data['year']+'" class="active"><a href="#" class="yearlink" hidefocus>'+data['year']+'年</a <ul class="timelinenav-mpanel">';
		var navMonth='';
		$.each(data['month'],function(dmIndex,dm){
			
			navMonth+='<li data-month="'+dm+'" data-year="'+data['year']+'" class="highlight"><a href="#" class="monthlink" hidefocus>'+dm+'月</a></li>';
		});
	navYear+=navMonth+'</ul></li>';
});
navHtml=navYear;

	$('#timelinenavpanel').html(navHtml);
}

var parm_i=0;
function doNav(){
	
	$.each(nav_json,function(dataIndex,data){
		var parm_str = '';
		var parm_tmp = '';
		if(data['months']['num']!=0){
			
			parm_req_array.push(data['year']+'-'+data['months']['month']);
			
			/*if(parm_i%3==0){
				alert(parm_i);
				parm_tmp+=data['year']+'-'+data['months']['month']+'|';
				parm_i++;
			}else{
				
				//parm_tmp+=data['year']+'-'+data['months']['month']+'|';
				parm_i++;
				
				//parm_req_array.push(parm_str);
			}*/
			
			//alert(data['year']+'-'+data['months']['month']);
		}
		
	});
	
}

function doGetTimePhoto(parm){
	var TimelineData='';
	$.ajax({
	type:'GET',
	url:'index.php?s=/Home/Baby/TimelineData/parm/'+parm,
	dataType:'JSON',
	success:function(json){
		new_array.shift();//取出数据成功后，去除数组第一位
		$.each(json,function(dIndex,data){
			
			TimelineData+='<div class="mod-timeline">
        	<div class="timeline-cat separate">
            	<div class="timeline-year-ind clearfix" id="yearind'+dIndex+'">
                	<div class="overlayer clearfix">
                    	<span class="year-label">'+dIndex+'</span>
                        <span class="ind-arr"></span>
                    </div>
                </div>
            </div>';
			var imgstr = '';
			$.each(data,function(ddIndex,dd){
				TimelineData+='<div class="timeline-cat"> 
            <ol class="timeline-main clearfix"><li class="timeline-rec clearfix right-col"> <div class="timeline-rec-timestamp">'+data[ddIndex][0].photo_month+'-'+data[ddIndex][0].photo_day+'</div> <div class="timeline-rec-cnt">     <div class="s-article w572 lightgray title-bot" data-click="http://hi.baidu.com/huangpo/item/cb985ea0cd76a29b14107369"> <div class="rec-arr"></div> <div class="rec-title"><span class="rec-title-txt">共'+data[ddIndex].length+'张相片</span></div>  
     ';
					for(var j=0;j<data[ddIndex].length;j++){
						//alert(data[ddIndex][j].id);
						TimelineData+='<div class="userRelationUser">
    	<div class="profilePic">
        	<a href="#" target="_blank">
            
            	<img src="http://facesbaby.u.qiniudn.com/'+data[ddIndex][j]['photo_path']+'?imageView/1/w/98/h/98" />
                
            </a>
        </div>
        <div class="profileLink">
        
        '+data[ddIndex][j]['photo_topic']+'<br><strong>拍摄时间:'+data[ddIndex][j]['photo_hour']+'点'+data[ddIndex][j]['photo_miniue']+'分</strong></div></div>';
					}
					TimelineData+='</div>   </div>
</li></ol>

</div><!--end timeline-cat -->';
				
			});
			/*$.each(data,function(ddIndex,dd){
				$.each(dd,function(dddIndex,ddd){
				TimelineData+='<div class="timeline-cat"> 
            <ol class="timeline-main clearfix"><li class="timeline-rec clearfix right-col"> <div class="timeline-rec-timestamp">'+ddd.photo_day+'</div> <div class="timeline-rec-cnt">     <div class="s-article w572 lightgray title-bot" data-click="http://hi.baidu.com/huangpo/item/cb985ea0cd76a29b14107369"> <div class="rec-arr"></div> <div class="rec-title"><span class="rec-title-txt">共张相片</span><a href="#" class="rec-title-from">来自空间</a></div>  
            
	
    
    </div>   </div>
</li></ol>

</div><!--end timeline-cat -->';
				});
			});*/
			TimelineData+='</div>';
		});
		$("#timelinemain").append(TimelineData);
		$(".timeline-year-ind").each(function(){ 
		
			offset_array.push($(this).offset().top);
		});
	}
	});
}
var new_array=new Array();
$(document).ready(function(){
	
	//首先将#back-to-top隐藏
	$("#back-to-top").hide();
	//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
	
		$(window).scroll(function(){
		if ($(window).scrollTop()>100){
		$("#back-to-top").fadeIn(1500);
		}
		else
		{
		$("#back-to-top").fadeOut(1500);
		}
		});
		//当点击跳转链接后，回到页面顶部位置
		$("#back-to-top").click(function(){
		$('body,html').animate({scrollTop:0},1000);
		return false;
		});
		
	
	doNav();	
	createNav();
	
	
	
	
	var str='';
	for(var i=0;i<parm_req_array.length;i++){
		
		if(i==0){
			str+=parm_req_array[i]+'|';		
			//continue;	
		}else{
			
				if(i%2==0){
					str+=parm_req_array[i]+'';
					new_array.push(str);
					str='';
				}else{
					if(parm_req_array.length-i==1){
						str+=parm_req_array[i];
						new_array.push(str);
					}else{
						str+=parm_req_array[i]+'|';
					}
					
				}
			
		}
		
	}
/*	$.each(new_array,function(dindex,dd){
		alert(dd);
	});*/
	doGetTimePhoto(new_array[0]);
	
	//滚动条事件
         $(window).scroll(function() {
             //获取窗口一半的高度+滚动条高度
             // $(window).height() / 2;
             //改变样式 显示 
             //$("#FloatBlock").show();
             //改变样式 top 高度
            // $("#FloatBlock").animate({ top: offsetTop + "px" }, { duration: 600, queue: false });
             //改变left 位置
            // $("#FloatBlock").animate({ left: 10 + "px" }, { duration: 600, queue: false });
			setTimlineTitle();
         });
	
	
});
var yearind_current = '';
var offset_array = new Array();
function setTimlineTitle(){
	var current_pgae = '',position_dis = '';	
	var tmp='';
	$(".timeline-year-ind").each(function(){ 
		var offsetTop = $(window).scrollTop();

		position_dis = parseInt($(this).offset().top)-$(document).scrollTop();
		
		if(position_dis<30){
			
			$(".timeline-year-ind").each(function(){ 
				$(this).removeClass("fixed");
			});
			if(offsetTop<30){
				$(this).removeClass("fixed");
				$(".mod-timelinenav").removeClass("fixed");
			}else{
				$(".mod-timelinenav").addClass("fixed");
				$(this).addClass("fixed");
			}
		}
		
	});	
}
function getTimelineMore(){
	doGetTimePhoto(new_array[0]);	
	if(new_array.length==1){
		$("#timline_more_btn").hide();	
	}
}
</script>


</body>
</html>